<template>
  <!-- <div class="container-fluid" id="course" v-if="sections">
    <listhe v-bind="{ cid }" style="float:right; padding: 20px 0px;"></listhe>
    <aliplayer ref="sections" v-bind="{lid:sections.ID, question}"></aliplayer>
    <div class="row mga">
      <div class="col">
        <div class="block">
          <bottombar v-bind="{ tiaoguo:$refs, files, teacherfile }"></bottombar>
        </div>
      </div>
    </div>
  </div>-->
  <el-container id="course">
    <el-main>
      <div class="container-fluid" v-if="sections" >
        
        <!-- <aliplayer ref="sections" v-show="this.couse1[0].type=='video'" v-bind="{lid:sections.ID, question}"></aliplayer>
        <div style="display: flex;height: -webkit-fill-available;"  v-if="this.couse1[0].type=='vector'">

          <scetionw v-bind="{lid:sections.ID, question}"></scetionw>
        </div> -->
        <router-view v-if="this.couse1[0].type=='video'" name="aliplayer" ref="sections" v-bind="{lid:sections.ID, question}"></router-view>
        <router-view v-else name="scetionw"></router-view>
        <div class="row mga">
          <div class="col">
            <div class="block">
              <bottombar v-bind="{ tiaoguo:$refs, files, teacherfile }"></bottombar>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <listhe v-bind="{ cid }" style="padding: 20px 0px;"></listhe>
  </el-container>
</template>

<script>
import bottombar from "../../../components/lession/bottombar.vue";
import listhe from "../../../components/lession/listhe.vue";
import aliplayer from "../aliplayer/index.vue";
import scetionw from "./scetionw.vue";
import {
  asyncvideoQuestion,
  asyncgetLessionByCourseid,
  asyncgetCourseFile,
  asyncselectCoursefile,
  asyncgetiframebyid
} from "../../../plugins/api.js";
import { mapGetters } from "vuex";

export default {
  name: "sections",
  data() {
    return {
      sections: false,
      files: false,
      question: [],
      couse1: [],
      teacherfile: [],
      iframes: null,
      num: 1
    };
  },
  props: ["cid"],
  computed: mapGetters(["getuser", "getCourse"]),
  watch: {
    // $route() {
    //   this.start();
    // },
    async cid() {
      try {
        this.files = await asyncgetCourseFile({ cid: this.cid });
         this.start();
      } catch (err) {
        console.log(err);
      }
    }
  },
  async mounted() {
    try {
      this.files = await asyncgetCourseFile({ cid: this.cid });
    this.start();
    } catch (err) {
      console.log(err);
    }
  },
  components: {
    aliplayer,
    listhe,
    bottombar,
    scetionw
  },
  methods: {
    async start() {
      let cid = this.cid;
      let num = this.num;
        this.couse1 = await asyncgetLessionByCourseid({ cid: cid });
      try {
        // if(this.couse1[0].type=='video'){
        //   this.$router.push("/myindex/"+`${cid}`+'/'+`${num}`);
        // }else{
        //    this.$router.push("/scetionw/"+`${cid}`+'/'+`${num}`);

        // }
        this.teacherfile = await asyncselectCoursefile({ cid: cid });
        await this.fundiframe();
        for (let v of this.couse1) {
          if (v.num == num) {
            this.sections = v;
            this.question = await asyncvideoQuestion({ lid: this.sections.ID });
          }
        }
      } catch (err) {
        this.$alert("课程马上开放请先观看其他课程");
        this.$router.push("/allclass");
      }
    },
    async fundiframe() {
      for (let v of this.getCourse) {
        if (v.ID == this.cid && v.iframeid) {
          this.iframes = await asyncgetiframebyid({ ID: v.iframeid });
        }
      }
    },
    current(e) {
      console.log(e);
    },
    total() {
      return this.couse1.length;
    }
  }
};
</script>

<style scoped>
.setions-row {
  padding-top: 12px;
}
.kejian {
  height: 166px;
  margin: -1px 0 0 1px;
}

#course {
  max-width: 1701px;
  margin: 20px auto;
  min-height: 650px;
  margin-top: 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
}

#course .el-main {
  padding-right: 5px;
  padding-left: 5px;  
}
</style>